<template>
  <div>
    <h1>
      {{title}}
      <span class="h1-state" :class="isColorShow(state)" v-if="isState">
        {{state}}
      </span>
    </h1>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String
    },
    isState: {
      type: Boolean,
      default: false
    },
    state: {
      type: String,
      default: ''
    }
  },
  methods: {
    isColorShow (state) {
      const stateMap = {
        '审核通过': 'l-c-by',
        '审核不通过': 'l-c-processing',
        '支付成功': 'l-c-success',
        '审核中': 'l-c-audit',
        '审核失败': 'l-c-Failed',
        '待审核': 'l-c-black',
        '支付失败': 'l-c-fail'
      }
      return stateMap[state]
    }
  }
}
</script>

<style lang="scss" scoped>
@import '~assets/scss/public/var.scss';
h1 {
  background: $colorBorder;
  font-size: .9rem;
  font-family: PingFangSC-Regular;
  color: $colorBlack;
  line-height: 2rem;
  box-sizing: border-box;
  padding-left: .5rem;
  .h1-state {
    display: block;
    float: right;
    margin-right: .5rem;
  }
}

// 状态颜色
.l-c-success {
  color: $colorSuccess;
}
.l-c-by {
  color: $colorBy;
}
.l-c-failure {
  color: $colorFailure;
}
.l-c-processing {
  color: $colorProcessing;
}
.l-c-Failed {
  color: $colorFailed;
}
.l-c-black {
  color: $colorBlack;
}
.l-c-fail {
  color: $colorFail;
}
</style>
